<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>代理商充电保</title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
    <meta http-equiv="cleartype" content="on">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/assets/base/data/css/style.css">
    <link rel="stylesheet" href="/assets/base/data/css/mobiscroll.custom-3.0.0-beta2.min.css">
</head>
<body>
<div class="wraper">
    <div class="header2 header white text-center">
        <a href="#" class="iconfont icon-chevron-left white"></a>
        <div class=" font-16">充值统计</div>
    </div>

    <div class="tab text-center">
        <div class="tab-list extra">
            <p>统计图</p>
        </div>
        <div class="tab-list">
            <p>趋势图</p>
        </div>
    </div>
    <div class="contain actived">
        <div class="padding-12 flex-between">
            <div class="day">
                <input id="month2" type="text"/>
                <div class="kongbai"></div>
            </div>
            <div class="iconfont icon-riqi1 iconrili2 gray2"></div>
        </div>
        <div>
            <div class="flex-between titles">
                <div>互联网金融大厦</div>
                <div>充电时间次数数据</div>
            </div>
            <div id="container1" style="min-width:100%;height:168px"></div>
        </div>
        <div class="content">
            <div class="box flex-center">
                <span class="iconfont icon-mingxishuju icon blue"></span>
                <span>明细数据</span>
            </div>
            <div class="box2 gray">
                <div class="data flex-between padding-0">
                    <div>0-1小时</div>
                    <div>
                        50次
                    </div>
                </div>

                <div class="data flex-between padding-0">
                    <div>1-2小时</div>
                    <div>
                        100次
                    </div>
                </div>

                <div class="data flex-between padding-0">
                    <div>2-3小时</div>
                    <div>
                        50次
                    </div>
                </div>

                <div class="data flex-between padding-0">
                    <div>3-4小时</div>
                    <div>
                        50次
                    </div>
                </div>
                <div class="data flex-between padding-0">
                    <div>4-5小时</div>
                    <div>
                        50次
                    </div>
                </div>
                <div class="data flex-between padding-0">
                    <div>5-6小时</div>
                    <div>
                        50次
                    </div>
                </div>
                <div class="data flex-between padding-0">
                    <div>6-7小时</div>
                    <div>
                        50次
                    </div>
                </div>
                <div class="data flex-between padding-0">
                    <div>7-8小时</div>
                    <div>
                        500次
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="contain ">
        <div class="padding-12 flex-between">
            <div class="day">
                <input id="month" type="text"/>

                <div class="kongbai"></div>
            </div>
            <div class="iconfont icon-riqi1 iconrili1 gray2"></div>
        </div>
        <div class="flex-between titles">
            <div>沃麦隆</div>
            <div>充值统计数据</div>
        </div>
        <div id="container2" style="min-width:100%;height:170px"></div>
        <div class="content">
            <div class="box flex-center">
                <span class="iconfont icon-mingxishuju icon blue"></span>
                <span>明细数据</span>
            </div>
            <div class="box2 gray">
                <div class="data flex-between padding-0">
                    <div>2017-10-31</div>
                    <div>
                        50元
                    </div>
                </div>
                <div class="data flex-between padding-0">
                    <div>2017-10-30</div>
                    <div>
                        50元
                    </div>
                </div>
                <div class="data flex-between padding-0">
                    <div>2017-10-29</div>
                    <div>
                        50元
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

</body>
<script src="/assets/base/data/js/jquery-2.1.0.min.js"></script>
<script src="/assets/base/data/js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
<script src="/assets/base/data/js/highcharts.js"></script>
<script>
    $(function () {
        $('#month,#month2').mobiscroll().date({
            theme: 'android-holo-light',//皮肤样式
            lang: 'zh',//中文
            display: 'bottom',//位于底部
            dateFormat: 'yyyy/mm'//格式
        });
    });
    $('.iconrili2').click(function () {
        $('#month2').click();
    });
    $('.iconrili1').click(function () {
        $('#month').click();
    });
    $(function () {
        var date = new Date();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();
        if (month < 10) {
            month = '0' + month;
        }
        var time = year + '/' + month;
        $('#month,#month2').val(time);
    });

    $(function () {
        $('.tab').on('click', '.tab-list', function () {
            var idx = $(this).index();
            $('.contain').eq(idx).addClass('actived').siblings('.contain').removeClass('actived');
            $(this).addClass('extra').siblings('.tab-list').removeClass('extra');

        })
    });

    var chart = new Highcharts.Chart('container1', {
            chart: {
                type: 'column'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                type: 'category',

                tickWidth: 0 // 主刻度的宽度
            },
            yAxis: {
                title: {
                    text: ''
                },
                labels: {
                    formatter: function () {
                        var num = this.value / 10000;
                        return num + '万';
                    }
                }
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: '',
                color: '#27a7e4',
                data: [{
                    name: '1月',
                    y: 900
                }, {
                    name: '2月',
                    y: 1000
                }, {
                    name: '3月',
                    y: 600

                }, {
                    name: '4月',
                    y: 950

                }, {
                    name: '5月',
                    y: 1100
                }, {
                    name: '6月',
                    y: 900
                }, {
                    name: '7月',
                    y: 1020
                }, {
                    name: '8月',
                    y: 1200
                }, {
                    name: '9月',
                    y: 1200
                }, {
                    name: '10月',
                    y: 1200
                }, {
                    name: '11月',
                    y: 1200
                }, {
                    name: '12月',
                    y: 1200
                }]
            }]
        });

    var chart = new Highcharts.Chart('container2', {
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            tickWidth: 0, // 主刻度的宽度
            categories: ['10/1', '10/2', '10/3', '10/4', '10/5', '10/6', '10/7', '10/8', '10/9', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20', '10/21', '10/22', '10/23', '10/24', '10/25', '10/26', '10/27', '10/28', '10/29', '10/30'],
            labels: {
                step: 6,
                align: 'left',
                x: -2
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    var num = this.value / 10000;
                    return num + '万';
                }
            }
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: false

                }
            }
        },
        tooltip: {
            valueSuffix: ''
        },
        colors: [
            "#27a7e4"
        ],
        series: [{
            name: '',
            data: [559.00, 400.00, 20.00, 400.00, 731.88, 400.04, 600.00, 150.00, 397.37, 487.50, 342.12, 509.44, 120.88, 527.29, 742.13, 681.34, 3305.84, 890.00, 140.00, 280.00, 200.00, 231.88, 1040.04, 800.00, 120.00, 397.37, 282.50, 442.12, 109.44, 760.88]
        }]
    });
</script>
</html>